<template>
	<!-- 得分 -->
	<view class="content">
		<view class="base-page-bg-img"><image class="img" src="/static/image/hszg.png" mode="aspectFit"></image></view>
		<nav-bar leftType="4" navBg="#5194FA" leftColor="#fff"></nav-bar>
		<view class="top">
			<view class="describe">本次答题得分</view>
			<view class="top-list">
				<view class="item">
					<view class="num">{{$common.scoreFromat(statistics.right)}}</view>
					<view class="sum">总分360分</view>
				</view>
				<view class="item">
					<view class="num">{{statistics.accuracy}}<view class="symbol">%</view></view>
					<view class="sum">答题正确率</view>
				</view>
				<view class="item">
					<view class="num">{{scorerate}}<view class="symbol">%</view></view>
					<view class="sum">超过%用户</view>
				</view>
			</view>
		</view>
		
		<view class="sum-up">
			<view class="describe">本次刷题小结</view>
			<view class="sum-list">
				<view class="item">
					<view class="num">1</view>
					<view class="text">答对题目数量</view>
					<view class="count">{{statistics.right}}道</view>
				</view>
				<view class="item">
					<view class="num">2</view>
					<view class="text">答错题目数量</view>
					<view class="count">{{statistics.wrong}}道</view>
				</view>
				<view class="item">
					<view class="num">3</view>
					<view class="text">答题用时</view>
					<view class="count">{{exerciseTime}}</view>
				</view>
			</view>
		</view>
		
		<view class="bottom-btn">
			<button class="base-btn1" @click="goAiAnalyse">陶老师AI分析</button>
		</view>
		
	</view>
</template>

<script>
	import {getMockRateByScore} from '@/api/index.js'
	export default {
		data() {
			return {
				statistics: {
					accuracy: 0,
					all: 0,
					right: 0,
					wrong: 0,
				},
				scorerate: '',
			}
		},
		computed: {
			SUBJECTBYDEPT() {
				return this.$store.state.SUBJECTBYDEPT;
			},
			exerciseList() {
				return this.$store.state.exerciseList;
			},
			exerciseTime() {
				let time=this.$store.state.exerciseTime;
				return time<60 ? time+'秒' : time/60+'分';
			},
		},
		onLoad() {
			this.getStatistics();
		},
		onReady(){
			
		},
		methods: {
			// ai分析
			goAiAnalyse(){
				uni.redirectTo({
					url: '/pagesA/aiAccuracy/analyse'
				});
			},
			getStatistics(){
				const exl=this.exerciseList;
				const list=this.SUBJECTBYDEPT;
				const right=list.filter((item,index)=>item.value==exl[index]).length;
				const wrong=list.filter((item,index)=>item.value!=exl[index] && exl[index]).length;
				Object.assign(this.statistics,{
					accuracy: (right+wrong)===0 ? 0 : (right/(right+wrong)*100).toFixed(1),
					all: right+wrong,
					right,
					wrong,
				})
				setTimeout(()=>{
					this.getMockRateByScore();
				},0)
			},
			getMockRateByScore(){
				getMockRateByScore({point: this.$common.scoreFromat(this.statistics.right)}).then(res=>{
					this.scorerate=res.data;
				})
			},
			cutClick(){
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background: linear-gradient( 180deg, #5194FA 0%, #5194FA 40%, #F5F3F3 66%, #FFFFFF 100%);
	}
	.top{
		padding: 16rpx 50rpx 60rpx 36rpx;
		color: #fff;
		.describe{
			font-size: 32rpx;
		}
	}
	.top-list{
		display: flex;
		.item{
			flex: 1;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			&:nth-child(1){
				.num{
					height: 134rpx;
					overflow: hidden;
					margin-bottom: 6rpx;
					font-size: 96rpx;
				}
			}
			&:nth-child(2),&:nth-child(3){
				.num{
					height: 92rpx;
					overflow: hidden;
					font-size: 66rpx;
				}
			}
			&:nth-child(2){
				.num{
					margin-bottom: 14rpx;
				}
			}
			&:nth-child(3){
				flex-shrink: 0;
				padding-left: 60rpx;
				.num{
					margin-bottom: 14rpx;
				}
				&::before{
					content: "";
					position: absolute;
					top: 50%;
					left: 0;
					width: 2rpx;
					height: 134rpx;
					margin-top: -54rpx;
					opacity: .5;
					background-color: #EBEBEB;
				}
			}
		}
		.num{
			display: flex;
			margin-bottom: 14rpx;
			font-weight: 600;
		}
		.sum{
			font-size: 32rpx;
		}
	}
	.sum-up{
		padding: 40rpx 38rpx;
		border-radius: 36rpx 36rpx 0 0;
		background-color: #fff;
		.describe{
			margin-bottom: 38rpx;
			font-size: 36rpx;
			font-weight: 600;
			color: #2B2B2B;
		}
	}
	.sum-list{
		padding: 0 4rpx;
		.item{
			display: flex;
			align-items: center;
			height: 136rpx;
			font-size: 34rpx;
			border-bottom: 2rpx solid rgba(238,238,238,.32);
			&:nth-child(1){
				.count{
					color: #4DCE8D;
				}
			}
			&:nth-child(2){
				.count{
					color: #FE3224;
				}
			}
			&:last-child{
				border-bottom: none;
			}
		}
		.num,.count{
			flex-shrink: 0;
		}
		.num{
			width: 66rpx;
			height: 66rpx;
			margin-right: 24rpx;
			text-align: center;
			line-height: 66rpx;
			font-size: 24rpx;
			font-weight: 600;
			border-radius: 50%;
			background-color: #F8F8F8;
		}
		.text{
			flex: 1;
			color: #333;
		}
	}
	.bottom-btn{
		height: 100rpx;
	}
	.base-btn1{
		position: fixed;
		left: 50%;
		bottom: 98rpx;
		width: 666rpx;
		margin-left: -333rpx;
		letter-spacing: 5rpx;
	}
</style>
